{% load static i18n  %}

<div class="w-full">
<canvas id="bimCanvas" style="width: 80vw; height: 90vh"></canvas>
<canvas id="navCanvas" style="width: 200px; height: 200px"></canvas>
</div>
<script id="source" type="module">
    import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, StoreyViewsPlugin, FastNavPlugin, BCFViewpointsPlugin} from
            "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js";

    const viewer = new Viewer({
        canvasId: "bimCanvas",
        transparent: true,
        pbr: true,                          // Enable physically-based rendering for Viewer
        sao: true
    });

    const navCube = new NavCubePlugin(viewer, {
        canvasId: "navCanvas",
        visible: true,         // Initially visible (default)

        cameraFly: true,       // Fly camera to each selected axis/diagonal
        cameraFitFOV: 65.5,      // How much field-of-view the scene takes once camera has fitted it to view
        cameraFlyDuration: 0.5,// How long (in seconds) camera takes to fly to each new axis/diagonal

        fitVisible: true,     // Fit whole scene, including invisible objects (default)

        synchProjection: true // Keep NavCube in perspective projection, even when camera switches to ortho (default)
    });

    const storeyViewsPlugin = new StoreyViewsPlugin(viewer);
    // Add a BCFViewpointsPlugin
    const bcfViewpoints = new BCFViewpointsPlugin(viewer);
    const loaderPlugin = new WebIFCLoaderPlugin(viewer, {
        wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
    });

    viewer.scene.sao.enabled = true;
    viewer.scene.sao.numSamples = 60;
    viewer.scene.sao.kernelRadius = 170;

    // Install a FastNavPlugin

    new FastNavPlugin(viewer, {
        hideEdges: true,                // Don't show edges while we interact (default is true)
        hideSAO: true,                  // Don't show ambient shadows while we interact (default is true)
        hideColorTexture: true,        // No color textures while we interact (default is true)
        hidePBR: true,                  // No physically-based rendering while we interact (default is true)
        hideTransparentObjects: true,   // Hide transparent objects while we interact (default is false)
        scaleCanvasResolution: true,    // Scale canvas resolution while we interact (default is false)
        scaleCanvasResolutionFactor: 0.5,  // Factor by which we scale canvas resolution when we interact (default is 0.6)
        delayBeforeRestore: true,       // When we stop interacting, delay before restoring normal render (default is true)
        delayBeforeRestoreSeconds: 0.5  // The delay duration, in seconds (default is 0.5)
    });

    const model = loaderPlugin.load({
        src: "/urn_ifc/{{ urn.id }}",
        edges: true,
        objectDefaults: {
            IfcSpace: {
                pickable: false,
                opacity: 0.2
            }
        },
        sao: true,                          // Enable ambient shadows for this model
        pbr: true
    });
    window.viewer = viewer;
</script>